<!DOCTYPE HTML>
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
	<meta charset="UTF-8">	
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title>TNVSolution - HTML5 Portfolio</title>
	
	<meta name="description" content="" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	
	<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
	<link href='css/josefin-sans/stylesheet.css' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,bold' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" href="css/prettyPhoto.css" />
	
		
	<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
	<![endif]-->
	
</head>
<body>

	
	<div id="header-wrapper">
		<header id="site-header" class="clearfix">
			<div class="clearfix">
				<h1><a href="index.html"><img src="images/logo3.png" alt="TNVSolution" /></a></h1>
				
				<nav id="header-nav">
					<ul>
						<li class="current"><a href="index.html">Home</a>
						</li>

						<li><a href="about.html">About</a></li>
						<li><a href="services.html">Services</a></li>
						<li><a href="portfolio-default.html">Portfolio</a>
						</li>
						
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</nav>

			</div>
			
			
			
			<div id="slider-wrapper">
				<div id="slider">
					<!-- 1st slide -->
					<div class="slide">
						<div class="text">
							<h2>You Design We HTML (XHTML, Wordpress, Joomla)</h2>
							
							<p>W3C Valid XHTML 1.0 Transitional table-less markup with Optimized Shorthand CSS. <br />

Compatible with IE, Firefox, Chrome, Safari and other popular browsers.. 
							</p>
							
							<a href="portfolio-default.html" class="action-btn golden">Explore Now</a>
						</div>
						
						<div class="img">
							<img src="images/slider-screenshot.png" alt="" />
						</div>
					</div>
					
					<!-- 2nd slide -->

					<div class="slide">
						<div class="text">
							<h2>Works in all Browsers</h2>
							
							<p>I believe a near-exact cross-browser experience is attainable in many cases. As developers, our goal should not just be to get it working in every browser; our goal should be to get it working in every browser with a minimal amount of code, allowing future website maintenance to run smoothly. 
							</p>
							
							<a href="portfolio-default.html" class="action-btn golden">Explore Now</a>
						</div>
						
						<div class="img">

							<img src="images/browsers.png" alt="" />
						</div>
					</div>
					
					<!-- 3rd slide -->
					<div class="slide">
						<div class="text">
							<h2>HTML5 and CSS3</h2>
							
							<p>HTML5 and CSS3 are the future of web development, but you don't have to wait to start using them. We can use new HTML5 elements and CSS3 features you can use right now, and backwards compatible solutions ensure that you don't leave users of older browsers behind.
							</p>

							
							<a href="portfolio-default.html" class="action-btn golden">Explore Now</a>
						</div>
						
						<div class="img">
							<img src="images/html5.png" alt="" />
						</div>
					</div>
				</div>
				
				<a class="prev-slide"></a>

				<a class="next-slide"></a>
				
			</div>  <!-- end #slider-wrapper -->
			
		</header>
	</div>  <!-- end #header-wrapper -->
	
	
	
	
	<div id="tag-line">
		<p>Success for Clients, Employees and The Company</p>
	</div>

	
	
	<div id="main-wrapper" class="home-slider">
		<div id="main">
			
			<!-- Company description -->
			<div id="description" class="clearfix">
				
				<div class="columns">
					<img src="images/home-users.png" alt="" />
					
					<h2>Who We Are</h2>					
					
					<p>TNVSolution is who we are and what we do. We're a team dedicated to delivering the very best websites for our clients, and to ensuring that those websites remain the very best.<br />

                    Our core values are <br />
Integrity, Teamwork, Excellence,<br />
Independent Thinking, and Creativity.<br />
					</p>
					
					<a href="about.html" class="more blue-btn">Read More</a>
				</div>
				
				<div class="columns">
					<img src="images/home-services.png" alt="" />

					
					<h2>What We Do</h2>
					
					<p>Customers or clients? Staff or shareholders? Partners, patients, the public or the press? No matter who you want to communicate with and why, we can help you use the web to do just that more effectively. We understand the wider business context, the commercial imperatives and the need to achieve your objectives.
					</p>
					
					<a href="services.html" class="more blue-btn">Read More</a>
				</div>
				
				<div class="columns">
					<img src="images/home-graph.png" alt="" />
					
					<h2>Why Choose Us</h2>

					
					<p>We all know great design is important. TNVSolution takes your site further, providing you with powerful online tools that will build your business’ web presence, helping you achieve your internet marketing goals. A website is search engine optimized, yields powerful visitor data, and allows you to edit your own content.
					</p>

					<a href="why-choose-us.html" class="more blue-btn">Read More</a>
				</div>
			</div>  <!-- end #description -->
			
			
			
			
			<!-- Testimonial -->
			<div id="home-testimonial">
				<blockquote>					<p>Nguyen Khoa and Team. Thank you so much for your work here, to my mind you have over delivered your ability to adapt to the Job and Customer is A+. I will use you again. Kind regards
					</p>
					
					<cite>Vincent Zuniaga</cite>
				</blockquote>
			</div>
			
			
			<div id="featured-work" class="clearfix">
				<div id="folio-text">
					<h2>Our Latest Works</h2>
					<a href="portfolio-default.html" class="action-btn golden">View Portfolio</a>

				</div>
				
				<a class="prev-slide"><img src="images/prev.png" alt="" /></a>
				<a class="next-slide"><img src="images/next.png" alt="" /></a>
				
				<div id="folio-slider">
					<!-- 1st slide -->
					<div class="slide">
						
						<div class="item">
							
                        <img src="images/por/thumb/villagegreendentistry_com.png" />

						
						<div class="details">
							<h2>Web Design</h2>
							<p class="description">
								Wordpress Template <a href="http://www.villagegreendentistry.com/" target="_blank">Visit Site</a>
							</p>
						</div>
							
							<a href="images/por/villagegreendentistry_com.png" rel="prettyphoto[recent]"><img src="images/zoom-in.png" alt="" /></a>

						</div>
						<div class="item">
                        <img src="images/por/thumb/sandalford_com.png" alt="">
						
						<div class="details">
							<h2>Web Design</h2>
							<p class="description">
								Web Design <a href="http://sandalford.com/" target="_blank">Visit Site</a>

						</div>
							
							<a href="images/por/sandalford_com.png" rel="prettyphoto[recent]"><img src="images/zoom-in.png" alt="" /></a>
						</div>
						
						
						<div class="item">
                        
                        <img src="images/por/thumb/daisymaisie_com.png" alt="" />
						
						
						<div class="details">
							<h2>Design and Development</h2>
							<p class="description">

								Joomla template. <a href="http://www.daisymaisie.com/" target="_blank">Visit Site</a>
							</p>
						</div>
							
							<a href="images/por/daisymaisie_com.png" rel="prettyphoto[recent]"><img src="images/zoom-in.png" alt="" /></a>
						</div>
						
					</div>
					
					
					<!-- 2nd slide -->
					<div class="slide">

						
						<div class="item">
                        
                        <img src="images/por/thumb/kudubids_com.png" alt="">
					
						
						<div class="details">
							<h2>Design and Development</h2>
							<p class="description">
								Joomla template
                                <a href="http://www.kudubids.com/" target="_blank">Visit Site</a>
							</p>

						</div>
							
							<a href="images/por/kudubids_com.png" rel="prettyphoto[recent]"><img src="images/zoom-in.png" alt="" /></a>
						</div>
						
						<div class="item">
                        
                        <img src="images/por/thumb/babybliss_co_nz.png" alt="">
						
						
						<div class="details">
							<h2>Web Development</h2>
							<p class="description">

								Joomla website integrate virtuemart component - shopping cart <a href="#" target="_blank">Visit Site</a>
							</p>
						</div>
							
							<a href="images/por/babybliss_co_nz.png" rel="prettyphoto[recent]"><img src="images/zoom-in.png" alt="" /></a>
						</div>
						
						<div class="item">
                        
                        <img src="images/por/thumb/aoneelectrix_com_au.png" alt="">
						
						<div class="details">

							<h2>Web Design</h2>
							<p class="description">
								HTML5, CSS3 and Wordpress Template <a href="http://www.aoneelectrix.com.au/" target="_blank">Visit Site</a>
						</div>							
							<a href="images/por/aoneelectrix_com_au.png" rel="prettyphoto[recent]"><img src="images/zoom-in.png" alt="" /></a>
						</div>
						
					</div>
					
				</div>  <!-- end #folio-slider -->

				
			</div>  <!-- end #featured-work -->
			
		</div>  <!-- end #main -->
		
	</div>  <!-- end #main-wrapper -->
	
	
	<div id="footer-wrapper">
		<footer id="site-footer">
			
			<div id="footer-top" class="clearfix">
				<div class="columns">

					<h3>Get In Touch</h3>
					
					<p id="company-name">TNVSolution</p>
					
					<p>Lai The village,  <br/>
					   Thua Thien Hue, Viet Nam  <br/>Phone:  0987835855<br/>
					   Email: nakh2010@gmail.com <br/>
					</p>

					
					<a href="contact.html" id="contact-button" class="blue-btn">Contact Us</a>
				</div>
				
				<div class="columns">
					<h3>Favourites and Inspiration</h3>
					
					<ul id="footer-recent-posts" class="unordered-list">
						<li><a href="http://coding.smashingmagazine.com/">Smashing Magazine</a></li>
						<li><a href="http://net.tutsplus.com/">Web development tutorials</a></li>

						<li><a href="http://sharegfx.net/">World of graphic design</a></li>
						<li><a href="http://cssglobe.com/">Web Design News</a></li>
					</ul>
				</div>
				
				<div class="columns">
					<h3>Follow us</h3>
					
					<a href="#" class="social" title="Subscribe to our RSS feed"><img src="images/social-media/rss_32.png" alt="rss" /></a>

					<a href="#" class="social" title="Follow us on Twitter"><img src="images/social-media/twitter_32.png" alt="twitter" /></a>
					<a href="#" class="social" title="Follow us on Facebook"><img src="images/social-media/facebook_32.png" alt="facebook" /></a>
					<a href="#" class="social" title="Follow us on Google+"><img src="images/social-media/google_plus_32.png" alt="google+" /></a>
					<a href="#" class="social" title="Follow us on Linkedin"><img src="images/social-media/linkedin_32.png" alt="linkedin" /></a>
					<a href="#" class="social" title="Follow us on Dribble"><img src="images/social-media/dribble_32.png" alt="dribble" /></a>
					<a href="#" class="social" title="Follow us on Flickr"><img src="images/social-media/flickr_32.png" alt="flickr" /></a>
					<a href="#" class="social" title="Share this page on Delicious"><img src="images/social-media/delicious_32.png" alt="delicious" /></a>
					<a href="#" class="social" title="Share this page on Digg"><img src="images/social-media/digg_32.png" alt="digg" /></a>
					<a href="#" class="social" title="Share this page on Reddit"><img src="images/social-media/reddit_32.png" alt="reddit" /></a>

				</div>
				
				<div class="columns">
					<h3>Newsletter</h3>
					
					<p>Subscribe to our newsletter</p>
					
					<form action="#" id="newsletter" method="get">
						<input class="form-input" type="email" name="newsletter" placeholder="Enter email" required />
						<input class="form-btn" type="submit" name="submit" value="Subscribe" />
					</form>

				</div>
			</div>
			
			<div id="footer-bottom">
				<p id="copyright">Copyright &copy; 2011 TNVSlution. All rights reserved.</p>
				
				<nav id="footer-nav">
					<ul>
						<li><a href="index.html">Home</a></li>

						<li><a href="about.html">About</a></li>
						<li><a href="portfolio-default.html">Portfolio</a></li>
						<li><a href="services.html">Services</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</nav>
			</div>

		</footer>
	</div>  <!-- end #footer-wrapper -->
	
	
	
	<script src="../../../ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script>!window.jQuery && document.write('<script src="js/jquery-1.6.4.min.js"><\/script>')</script>
	<script src="js/jquery.easing.1.3.js"></script>
	<script src="js/jquery.cycle.all.min.js"></script>

	<script src="js/jquery.prettyPhoto.js"></script>
	<script src="js/tnvsolution.js"></script>
	<script>
		$(window).load(function(){
			var $slider = $('#slider'),
				$slides = $slider.find('div.slide'),
				curindex, newindex, bulletClick = false, prevClick = false;
				
			$slider 
			.after('<div id="slider-nav"/>')
			.cycle({ 
			    fx:     'scrollHorz', 
			    speed:  400, 
			    timeout: 5000,
			    easing: 'easeInQuad',
			    pause: 1,
			    next: '#slider-wrapper .next-slide',
			    prev: '#slider-wrapper .prev-slide',
			    pager: '#slider-nav',
			    cleartypeNoBg: true,
			    before: function( curSlide, newSlide ) {
			    			$(newSlide).children('div').hide();
			    			$(newSlide).children('img').hide();
			    		},
			    after: function( curSlide, newSlide ) {
			    			curindex = $slides.index(curSlide);
			    			newindex = $slides.index(newSlide);
			    			
			    			if( ( newindex === 0 && bulletClick ) || prevClick ) {
			    				$(newSlide).children('div.text').css( 'left', '-500px' );
			    				$(newSlide).find('h2').css( 'left', '-450px' );
			    				$(newSlide).children('div.img').css( 'left', '-1000px' );
			    				
			    				var imgdelay = 50;	
			    			}
			    			else {
			    				$(newSlide).children('div.text').css( 'left', '1000px' );
			    				$(newSlide).find('h2').css( 'left', '1000px' );
			    				$(newSlide).children('div.img').css( 'left', '500px' );
			    				
			    				var imgdelay = 200;
			    			}
			    			
			    			$(newSlide).children('div.text').show().animate({ left: '0' }, 600, 'easeOutQuint');
			    			$(newSlide).find('h2').animate({ left: '0' }, 800, 'easeOutQuint');
			    			$(newSlide).children('div.img').show().delay(imgdelay).animate({ left: '0' }, 600, 'easeOutQuint');
			    			
			    			bulletClick = false;
			    			prevClick = false;
			    		}	
			})
			.css('background', 'transparent none');
			
			$('#slider-nav').find('a').eq(0).click(function(){
				bulletClick = true;
			});
			
			$('#slider-wrapper').find('a.prev-slide').click(function(){
				prevClick = true;
			});	
			
			
			// portfolio slider
			$('#folio-slider').cycle({
				fx:     'scrollHorz', 
				speed:  400, 
				timeout: 0,
				easing: 'easeInQuad',
				next: '#featured-work .next-slide',
				prev: '#featured-work .prev-slide'
			})
			.delegate('div.item', 'mouseenter mouseleave', function(e){
				if( e.type === 'mouseenter' ) {
					$(this).children().not('img').stop(true, true).fadeIn(600);	
				}
				else {
					$(this).children().not('img').stop(true, true).fadeOut(600);	
				}
				
			})
			.find('a[rel^="prettyphoto"]').prettyPhoto({
				overlay_gallery: false,
				social_tools: false,
				deeplinking: false
			});		
		});
	</script>
	
</body>
</html>

